import { useState, useEffect } from 'react'

interface Product {
  id: number
  name: string
  price: number
  description: string
}

function Products() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 模拟异步加载
    const timer = setTimeout(() => {
      setProducts([
        { id: 1, name: '产品A', price: 99.99, description: '这是一个很棒的产品' },
        { id: 2, name: '产品B', price: 149.99, description: '高级功能产品' },
        { id: 3, name: '产品C', price: 199.99, description: '专业级解决方案' },
        { id: 4, name: '产品D', price: 249.99, description: '企业级产品' },
        { id: 5, name: '产品E', price: 299.99, description: '旗舰版产品' },
      ])
      setLoading(false)
    }, 1500)

    return () => clearTimeout(timer)
  }, [])

  if (loading) {
    return (
      <div className="page">
        <h1>产品列表</h1>
        <div className="loading">正在加载产品...</div>
      </div>
    )
  }

  return (
    <div className="page">
      <h1>产品列表</h1>
      <div className="products-grid">
        {products.map(product => (
          <div key={product.id} className="product-card">
            <h3>{product.name}</h3>
            <p className="price">${product.price}</p>
            <p>{product.description}</p>
            <button className="buy-button">购买</button>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Products